<!--
案例：奔跑的熊大
    - 素材：直接截图，将就用着，达到练习效果就行了
    - 原理：利用动画步长，在指定大小的窗口中显示。（类似精灵图）

拓展：直接用gif图。。不太好吧
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #4114ff;
  }

  div:first-child {
    position: absolute;
    width: 116px;
    height: 55px;
    background: url(./img/熊大.png) no-repeat;
    /* 单个动画 */
    animation: moveBear 0.7s steps(8) infinite;
  }

  div:last-child {
    position: absolute;
    width: 116px;
    height: 55px;
    margin-top: 100px;
    background: url(./img/熊大.png) no-repeat;
    /* 多个动画，逗号隔开 */
    animation: moveBear 0.7s steps(8) infinite, moveCenter 5s linear forwards;
  }

  @keyframes moveBear {
    to {
      /* 图片的最大长度：934px */
      background-position: -934px 0;
    }
  }

  @keyframes moveCenter {
    from {
      /* 这里不能省略，否则直接瞬移 */
      left: 0;
    }
    to {
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>

<div></div>
<div></div>
